<template>
	<!-- This footer should hidden by default and shown when there are todos -->
	<footer class="footer">
		<!-- This should be `0 items left` by default -->
		<span class="todo-count">
			<strong>{{ mainstore.items }}</strong> item left
		</span>
		<!-- Remove this if you don't implement routing -->
		<ul class="filters">
			<li>
				<a class="selected" href="#/" @click="Alls">All</a>
			</li>
			<li>
				<a href="#/active" @click="YES">Active</a>
			</li>
			<li>
				<a href="#/completed" @click="NO">Completed</a>
			</li>
		</ul>
		<!-- Hidden if no completed items are left ↓ -->
		<button class="clear-completed" @click="clears">Clear completed</button>
	</footer>
</template>

<script lang="ts" setup>

import { useMainStore } from '../store';
//引入axios
import axios from 'axios'
//获取状态实例化对象
const mainstore = useMainStore()

//清空已完成的
const clears = function () {
	//遍历容器仓库里边的数据，用item来接收
	mainstore.todoList = mainstore.todoList.filter((item) => {
		//判断状态为true的发起请求根据id删除,
		if (item.status == true) {
			axios.delete('http://localhost:3004/posts/' + item.id)
		}
		// 返回相反的状态，就是删除掉状态为true的留下false的
		return !item.status
	})
}

//展示全部
const Alls = (async () => {
	let { data } = await axios.get('http://localhost:3004/posts')
	mainstore.todoList = data
})

//显示已完成的
const YES = async () => {
	let data = await axios.get('http://localhost:3004/posts')
	mainstore.todoList = data.data.filter((val: any) => {
		if (val.status == true) {
			return val.status
		}
	})
}

//显示未完成的 
const NO = async () => {
	var data = await axios.get('http://localhost:3004/posts')
	console.log(data);
	mainstore.todoList = data.data.filter((val: any) => {
			return !val.status
		
	})
}
</script>

<style></style>